<template>
<div style="width:80%;margin:auto">
  <el-select v-model="value" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
  <el-input v-model="input" placeholder="请输入内容" style="width:200px;"></el-input>
  <el-button @click="query()">搜索</el-button>
  <el-button @click="addPetOwners" type="primary" style="float:right;">
    添加宠物主人
    </el-button>
  <el-table
    :data="serviceList"
    border
    style="width: 100%;margin-top:30px;">
    <el-table-column
      prop="ownerNickname"
      label="昵称"
      width="100">
    </el-table-column>
    <el-table-column
      prop="ownerHeadpic"
      label="头像"
      width="180">
    </el-table-column>
    <el-table-column
      prop="ownerName"
      label="真实姓名">
    </el-table-column>
    <el-table-column
      prop="ownerScore"
      label="手机号">
    </el-table-column>
    <el-table-column
      prop="ownerRegion"
      label="区域">
    </el-table-column>
    <el-table-column
      prop="ownerAddress"
      label="送货地址">
    </el-table-column>
    <el-table-column
      prop="ownerScore"
      label="操作">
       <template slot-scope="scope">
        <el-button @click="showPets(scope.row)" type="text" size="small">查看宠物</el-button>
        <el-button @click="updatePetOwners(scope.row)" type="text" size="small">修改</el-button>
        <el-button @click="handleDeleteOwner(scope.row)" type="danger" size="small">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <Pager 
      :page="page"
      :limit="limit"
      :total="total"
      :panelNumber="panelNumber"
      @changePage="handleNewPage"
  ></Pager>

  <!-- <div class="block">
  <el-pagination
    layout="prev, pager, next"
    :total="50">
  </el-pagination>
</div> -->
<!-- <div class="block">
  <span class="demonstration">大于 7 页时的效果</span>
  <el-pagination
    layout="prev, pager, next"
    :total="1000">
  </el-pagination>
</div> -->
</div>
  
</template>

<script>

import {showAll} from '@/services/PetService.js'
import {deleteOwner} from '@/services/PetService.js'
import {query} from '@/services/PetService.js'
import Pager from '../components/Pager'
  export default {
    components:{
    Pager,
  },
    data() {
      return {
        limit: 5,
        total: 0,
      panelNumber: 10,
        input:'',
        options: [{
          value: '昵称',
          label: '昵称'
        }, {
          value: '真实姓名',
          label: '真实姓名'
        }, {
          value: '手机号',
          label: '手机号'
        }],
        value: '',
        serviceList:[]
      }
    },
    inject:['reload'],
    async created(){
      console.log("测试：serviceList")
      var resp = await showAll(this.page,this.limit);
      this.serviceList=resp.list;
      this.total=resp.total;
      console.log("dddddddddddddd"+resp)
    },
    methods: {
      async query(){
          if(this.value == ""){
            alert("请选择查询方式")
            return;
          }
          this.$router.push({
            query: {
            page: 1,
          },
          }); 
          var resp = await query(this.value,this.input,this.page,this.limit);
          this.serviceList = resp.list;
           this.total = resp.total
          
          
       }
       ,
      async handleNewPage(newPage) {

      this.$router.push({
        query: {
          page: newPage,
        },
      }); 

      var resp = await showAll(this.page,this.limit);
      this.serviceList = resp.list;
      this.total = resp.total
    },
      addPetOwners() {
       this.$router.push({name:'AddPetOwners'})
      },
      showPets(row){
        this.$router.push({name:'Pets',params:row})
      },
      handleDeleteOwner(row){
         this.$confirm("你确定要删除该用户的信息吗？",{
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'danger'
        }).then((resp)=>{
          if(resp){
            deleteOwner(row.ownerId).then((res) =>{
              console.log(resp);
              if(res){
                this.reload();
                alert("删除成功");
              }else {
                alert("删除失败,服务器正忙");
              }
          })
          }
         
        }).catch(err => err)
      },
      
      updatePetOwners(row){
        this.$router.push({name:"UpdatePetOwners",params:row})
      },
    },
     computed:{
      page(){
        return +this.$route.query.page || 1;
      }
    }
  }
</script>

<style scoped>
a {
  text-decoration: none;
}
 
.router-link-active {
  text-decoration: none;
}

</style>